<template>
  <div class="createOffer-modal">
    <a-modal
      v-model:open="openMask"
      :footer="null"
      :maskClosable="false"
      :closable="false"
      class="loading-mask"
    >
      <div class="spin-wrap">
        <a-spin size="large" />
      </div>
    </a-modal>
    <a-modal
      :open="isOpen"
      :footer="null"
      :maskClosable="false"
      @cancel="handleClose"
      width="6.50rem"
    >
      <div class="createOffer-modal-content" v-show="step == 1">
        <div class="modal-title">Create Offer</div>
        <div class="network-name">
          {{ networkStore.chain.networkName }}
        </div>
        <div class="select-wrap">
          <a-select
            ref="select-marketType"
            v-model:value="marketType"
            style="width: 47%"
            @change="handleMarketType"
            size="large"
          >
            <a-select-option value="1">Pre-Market</a-select-option>
            <a-select-option value="2">Point-Market</a-select-option>
          </a-select>
          <a-select
            ref="select-offerType"
            v-model:value="offerType"
            style="width: 47%"
            size="large"
          >
            <a-select-option value="buying">BUYING</a-select-option>
            <a-select-option value="selling">SELLING</a-select-option>
          </a-select>
        </div>
        <div class="input-number-box">
          <div class="token-wrap">
            <div class="title">
              AMOUNT
              <!-- <a-tooltip>
                <template #title
                  ><span>Total tokens you want to buy.</span></template
                >
                <div class="tips-icon"></div>
              </a-tooltip> -->
            </div>
            <div class="cell">
              <div class="input-box">
                <a-input-number
                  id="inputNumber"
                  type="number"
                  :min="0"
                  v-model:value="tokenAmount"
                  :bordered="false"
                  placeholder="Enter amount"
                  @change="
                    (e) => {
                      handleChangeInput(e, 'tokenAmount');
                    }
                  "
                />
              </div>
              <div class="select-box">
                <a-dropdown trigger="click">
                  <template #overlay>
                    <a-menu>
                      <a-menu-item
                        v-for="item in tokenList"
                        :key="item.id"
                        @click="handleTokenMenuClick(item)"
                      >
                        <div class="menu-item">
                          <div
                            class="token-icon"
                            :style="`background-image:url(${item.imgUrl});width:0.18rem;height:0.18rem;background-size:cover;display:inline-block;`"
                          ></div>
                          {{ item.tokenName }}
                        </div>
                      </a-menu-item>
                    </a-menu>
                  </template>
                  <div class="menu-button">
                    <div
                      class="left-icon"
                      :style="`background-image:url(${currentToken?.imgUrl})`"
                    ></div>
                    <div class="current-menu-name">
                      {{ currentToken?.tokenName }}
                    </div>
                    <div class="right-icon"></div>
                  </div>
                </a-dropdown>
              </div>
            </div>
          </div>
          <div class="drive">
            <div class="line-1"></div>
            <div class="icon"></div>
            <div class="line-2"></div>
          </div>
          <div class="extoken-wrap">
            <div class="title">
              COLLATERAL
              <!-- <a-tooltip>
                <template #title
                  ><span
                    >The price you are paying to buy that specific amount of
                    tokens.</span
                  ></template
                >
                <div class="tips-icon"></div>
              </a-tooltip> -->
              <div class="token-usd-value">
                Total Price ≈ ${{ formatNumber(pricingTokenUSD) }}
              </div>
            </div>
            <div class="cell">
              <div class="input-box">
                <a-input-number
                  id="inputNumber"
                  type="number"
                  :min="0"
                  v-model:value="pricingTokenAmount"
                  :bordered="false"
                  placeholder="Enter amount"
                  @change="
                    (e) => {
                      handleChangeInput(e, 'exTokenAmount');
                    }
                  "
                />
              </div>
              <div class="select-box">
                <a-dropdown trigger="click">
                  <template #overlay>
                    <a-menu>
                      <a-menu-item
                        v-for="item in pricingTokenList"
                        :key="item.id"
                        @click="handlePricingMenuClick(item)"
                      >
                        <div class="menu-item">
                          <div
                            class="token-icon"
                            :style="`background-image:url(${item.imgUrl});width:0.18rem;height:0.18rem;background-size:cover;display:inline-block;`"
                          ></div>
                          {{ item.tokenName }}
                        </div>
                      </a-menu-item>
                    </a-menu>
                  </template>
                  <div class="menu-button">
                    <div
                      class="left-icon"
                      :style="`background-image:url(${currentPricingToken?.imgUrl})`"
                    ></div>
                    <div class="current-menu-name">
                      {{ currentPricingToken?.tokenName }}
                    </div>
                    <div class="right-icon"></div>
                  </div>
                </a-dropdown>
              </div>
            </div>
          </div>
        </div>
        <div class="per-input-box">
          <a-input
            size="large"
            id="inputNumber"
            type="number"
            :min="0"
            v-model:value="averageTokenPrice"
            placeholder="$Enter the Price Per Token"
            @change="
              (e) => {
                handleChangeInput(e, 'averageTokenPrice');
              }
            "
          />
        </div>
        <div class="fill-type-wrap">
          <div class="fill-title">Fill Type</div>
          <div class="group-check-wrap">
            <div class="group-item" @click="fillType = 'partialFill'">
              <div
                class="icon"
                :class="{ active: fillType == 'partialFill' }"
              ></div>
              <div class="text">
                <div class="title">Partial Fill</div>
                <div class="desc font-size-16">
                  Multiple investors can fulfill this offer
                </div>
              </div>
            </div>
            <div class="group-item" @click="fillType = 'singleFill'">
              <div
                class="icon"
                :class="{ active: fillType == 'singleFill' }"
              ></div>
              <div class="text">
                <div class="title">Single Fill</div>
                <div class="desc font-size-16">
                  1 investor MUST fill this offer
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="action-button-wrap">
          <div class="action-button" @click="handleClose">Cancel</div>
          <div
            class="action-button"
            @click="handleNext"
            :class="{ disabled: disabled }"
          >
            Confirm
          </div>
        </div>
      </div>
      <div class="createOffer-modal-content step-2" v-show="step == 2">
        <div class="modal-title">Create Offer</div>
        <div class="modal-header">
          <div
            class="token-image"
            :style="`background-image:url(${currentToken?.imgUrl})`"
          ></div>
          <div class="text">
            <div class="token-name">{{ currentToken?.tokenName }}</div>
            <div class="tips">
              You are {{ offerType }} {{ tokenAmount }}
              {{ currentToken?.tokenName }} for {{ pricingTokenAmount }}
              {{ currentPricingToken?.tokenName }}
            </div>
          </div>
        </div>
        <div class="modal-body">
          <div class="cell">
            <div class="label">Offer Type</div>
            <div :class="offerType == 'buying' ? 'single-tag' : 'partial-tag'">
              {{ offerType.toUpperCase() }}
            </div>
          </div>
          <div class="cell">
            <div class="label">
              Want to {{ offerType == "buying" ? "buy" : "sell" }}
              <a-tooltip>
                <template #title
                  ><span>Total tokens you are offering.</span></template
                >
                <div class="icon"></div>
              </a-tooltip>
            </div>
            <div class="value bold">
              {{ tokenAmount }}
              <div
                class="icon"
                :style="`background-image:url(${currentToken?.imgUrl})`"
              ></div>
            </div>
          </div>
          <div class="cell">
            <div class="label">
              For
              <a-tooltip>
                <template #title
                  ><span
                    >The price you are paying to buy that specific amount of
                    tokens.</span
                  ></template
                >
                <div class="icon"></div>
              </a-tooltip>
            </div>
            <div class="value bold">
              {{ pricingTokenAmount }}
              <div
                class="icon"
                :style="`background-image:url(${currentPricingToken?.imgUrl})`"
              ></div>
            </div>
          </div>
          <div class="cell">
            <div class="label">
              Price / Token
              <a-tooltip>
                <template #title
                  ><span>Token price per offered amount.</span></template
                >
                <div class="icon"></div>
              </a-tooltip>
            </div>
            <div class="value bold">${{ formatNumber(averageTokenPrice) }}</div>
          </div>
          <div class="cell">
            <div class="label">Fill Type</div>
            <div
              :class="fillType == 'singleFill' ? 'single-tag' : 'partial-tag'"
            >
              {{ fillType == "singleFill" ? "SINGLE FILL" : "PARTIAL FILL" }}
            </div>
          </div>
          <div class="cell" v-if="offerType == 'buying'">
            <div class="label">
              Platform fee
              <a-tooltip>
                <template #title
                  ><span
                    >{{ (Number(this.fee.feeSettle) / 10 ** 6) * 100 }}% fee is
                    deducted only after the settlement is completed
                    successfully.</span
                  ></template
                >
                <div class="icon"></div>
              </a-tooltip>
            </div>
            <div class="value bold">
              {{
                (Number(this.fee.feeSettle) / 10 ** 6) * this.pricingTokenAmount
              }}
              <div
                class="icon"
                :style="`background-image:url(${currentPricingToken?.imgUrl})`"
              ></div>
            </div>
          </div>
          <div class="cell" v-if="offerType == 'selling'">
            <div class="label">
              Collateral
              <div class="icon"></div>
            </div>
            <div class="value bold">
              {{ pricingTokenAmount }}
              <div
                class="icon"
                :style="`background-image:url(${currentToken?.imgUrl})`"
              ></div>
            </div>
          </div>
        </div>
        <div class="modal-footer" style="margin: 0.15rem 0">
          <div class="action-button" @click="step = 1">Back</div>
          <div
            class="action-button"
            v-if="handleApproveVisible"
            @click="handleApprove"
          >
            {{
              `Approve ${buttonPricingTokenAmount} ${currentPricingToken?.tokenName}`
            }}
          </div>
          <div
            class="action-button"
            v-if="handleDeposit"
            @click="createOfferByContract"
          >
            {{
              `Deposit ${buttonPricingTokenAmount} ${currentPricingToken?.tokenName}`
            }}
          </div>
        </div>
      </div>
    </a-modal>
    <contextHolder />
  </div>
</template>

<script>
import { useTokenStore } from "@/stores/token";
import { useNetworkStore } from "@/stores/network";
import { mapStores } from "pinia";
import {
  getPriceTokenByNetId,
  createOffer,
  getTokenByNetId,
  updateTxResult,
  offerCatchError,
} from "@/api/market";
import {
  contractConfig,
  newOffer,
  getPrizePoolDrawEventLogs,
  newOfferETH,
  erc20Approve,
  allowanceERC20,
} from "@/utils/web3Contract.js";
import { decMul, decDiv } from "@/utils/utils.js";
import { getAccount, fetchBalance } from "@wagmi/core";
import { notification } from "ant-design-vue";
const [api, contextHolder] = notification.useNotification();
import { errorParse } from "@/utils/error.js";

export default {
  components: {
    contextHolder,
  },
  props: {
    isOpen: Boolean,
  },
  computed: {
    ...mapStores(useTokenStore, useNetworkStore),
    pricingTokenUSD() {
      // 返回定价代币总价值
      if (!this.currentPricingToken || !this.pricingTokenAmount) {
        return 0;
      }
      return decMul(
        this.currentPricingToken?.usdPrice,
        this.pricingTokenAmount,
        4
      );
    },
    disabled() {
      if (this.tokenAmount && this.pricingTokenAmount) {
        return false;
      }

      return true;
    },
    handleApproveVisible() {
      if (
        this.step == 2 &&
        this.currentPricingToken.tokenAddress &&
        this.buttonPricingTokenAmount > this.allowERC20Amount
      ) {
        return true;
      }
      return false;
    },
    handleDeposit() {
      if (
        this.step == 2 &&
        this.currentPricingToken.tokenAddress &&
        this.buttonPricingTokenAmount <= this.allowERC20Amount
      ) {
        return true;
      }
      if (this.step == 2 && !this.currentPricingToken.tokenAddress) {
        return true;
      }
      return false;
    },
  },
  data() {
    return {
      loading: false,
      step: 1,
      openMask: false,
      marketType: "1", // market类型 1->pre 2->point
      offerType: "buying", //buying selling
      tokenAmount: 0,
      tokenList: [],
      currentToken: null, // 当前选择的代币
      currentPricingToken: null, // 当前选择的定价代币
      pricingTokenAmount: 0, // 填的定价代价数量
      buttonPricingTokenAmount: 0, // 显示在按钮的需要质押定价代币数量，sell的时候需要*抵押率
      fee: "",
      allowERC20Amount: 0,
      pricingTokenList: [],
      averageTokenPrice: undefined,
      fillType: "singleFill", //singleFill partialFill
    };
  },
  watch: {
    offerType(newVal, oldVal) {
      if (newVal == "buying") {
        this.buttonPricingTokenAmount = this.pricingTokenAmount;
      }
      if (newVal == "selling") {
        this.buttonPricingTokenAmount =
          this.pricingTokenAmount * (Number(this.fee.pledgeRate) / 10 ** 6);
      }
    },
    pricingTokenAmount(newVal, oldVal) {
      if (this.offerType == "buying") {
        this.buttonPricingTokenAmount = this.pricingTokenAmount;
      }
      if (this.offerType == "selling") {
        this.buttonPricingTokenAmount =
          this.pricingTokenAmount * (Number(this.fee.pledgeRate) / 10 ** 6);
      }
    },
  },
  mounted() {
    // this.marketType = this.$route.query.type;
    console.log(this.$route.name)
    if (this.$route.name == 'pointsMarket') {
      this.marketType = '2'
    }
    this.getContractConfig();
    this.getTokenList();
    this.getPriceTokenByNetId();
  },
  methods: {
    handleMarketType(type) {
      console.log(type);
      this.getTokenList();
      this.tokenAmount = 0;
      this.pricingTokenAmount = 0;
      this.averageTokenPrice = 0;
    },
    async getContractConfig() {
      const res = await contractConfig();
      console.log("fee", res);
      const fee = res;
      this.fee = fee;
    },
    formatNumber(number) {
      // 将数字保留四位小数
      const formattedNumber = Number(number).toFixed(8);
      // 使用正则表达式去除末尾多余的零
      return formattedNumber.replace(/\.?0+$/, "");
    },
    handleClose() {
      // 通知父组件关闭modal
      this.$emit("update:isOpen", false);
    },
    handleSuccess() {
      this.$emit("successCallback", "Create offer success");
    },
    handleNext() {
      if (this.disabled) return;
      this.step = 2;
    },
    handleTokenMenuClick(item) {
      this.currentToken = item;
    },
    getTokenList() {
      console.log(this.networkStore.chain);
      getTokenByNetId({
        networkId: this.networkStore.chain.networkId,
        tokenArea: this.marketType,
      }).then((res) => {
        console.log(res);
        this.tokenList = res.data;
        this.currentToken = res.data[0];
      });
    },
    // 获取定价代币
    getPriceTokenByNetId() {
      getPriceTokenByNetId({
        networkId: this.networkStore.chain.networkId,
      }).then((res) => {
        console.log(res);
        this.pricingTokenList = res.data;
        this.currentPricingToken = res.data[0];
        this.loading = false;
        this.getAllowanceERC20();
      });
    },
    handlePricingMenuClick(item) {
      this.currentPricingToken = item;
      if (this.pricingTokenAmount != 0 && this.tokenAmount != 0) {
        this.averageTokenPrice = decDiv(
          this.pricingTokenUSD,
          this.tokenAmount,
          6
        );
      }
      this.getAllowanceERC20();
    },
    async getAllowanceERC20() {
      console.log(this.currentPricingToken);
      // 如果是eth这类，没有tokenAddress，直接返回，不用获取
      if (!this.currentPricingToken?.tokenAddress) return;
      const account = getAccount();
      const res = await allowanceERC20(
        this.currentPricingToken.tokenAddress,
        account.address
      );
      this.allowERC20Amount =
        Number(res) / 10 ** this.currentPricingToken.decimals;
      console.log("allowanceRes", this.allowERC20Amount);
    },
    handleChangeInput(e, type) {
      console.log(e, type);
      if (type == "tokenAmount" || type == "exTokenAmount") {
        this.averageTokenPrice = decDiv(
          this.pricingTokenUSD,
          this.tokenAmount,
          6
        );
      }
      if (type == "averageTokenPrice") {
        const totalusdPrice = decMul(
          this.averageTokenPrice,
          this.tokenAmount,
          6
        );
        this.pricingTokenAmount = decDiv(
          totalusdPrice,
          this.currentPricingToken?.usdPrice
        );
      }
    },
    async handleApprove() {
      this.openMask = true;
      try {
        const result = await erc20Approve(
          this.currentPricingToken.tokenAddress,
          this.buttonPricingTokenAmount * 10 ** this.currentPricingToken.decimals
        );
        if (result.transactionHash) {
          this.getAllowanceERC20();
          api.success({
            message: `Success`,
            description: "Approve success",
            placement: "top",
          });
        }
      } catch (error) {
        api.error({
          message: `Error`,
          description: errorParse(error).toString(),
          placement: "top",
        });
      }
      this.openMask = false;
    },
    async createOfferByContract() {
      // const test = await getPrizePoolDrawEventLogs(1285248n);
      // console.log(this.currentPricingToken)
      // return;
      // 1,是否mainCoin，如果true，走newOfferETH, 如果false，走 newOffer
      this.openMask = true;
      const isMainCoin = this.currentPricingToken.isMainCoin;
      const offerType = this.offerType == "buying" ? "1" : "2"; // 判断买卖单，以此来判断是否要乘抵押率
      // const pricingTokenAmount =
      //   offerType == "1"
      //     ? this.pricingTokenAmount
      //     : this.pricingTokenAmount * (Number(this.fee.pledgeRate) / 10 ** 6); // 实际需要支付的extoken数量
      /** 2024.4.10，传给合约的不需要乘以抵押率，因为合约已经进行处理 */
      const pricingTokenAmount = this.pricingTokenAmount
      /** 先检查钱包余额 */
      if (!isMainCoin) {
        /** 先用tokenAddress检查token的余额 */
        const account = getAccount();
        const result = await fetchBalance({
          address: account.address,
          token: this.currentPricingToken.tokenAddress,
        });
        console.log("balance", result);
        if (Number(result.formatted) < pricingTokenAmount) {
          api.error({
            message: `Error`,
            description: "not sufficient funds",
            placement: "top",
          });
          this.openMask = false;
          return;
        }
      } else {
        /** 检查eth类的 */
        const account = getAccount();
        const result = await fetchBalance({
          address: account.address,
          chainId: Number(this.currentPricingToken.networkId),
        });
        console.log("balance", result);
        if (Number(result.formatted) < pricingTokenAmount) {
          api.error({
            message: `Error`,
            description: "not sufficient funds",
            placement: "top",
          });
          this.openMask = false;
          return;
        }
      }
      /** 创建挂单，拿到主键id，用来update的时候传递 */
      const id = await this.submitCreateOffer();

      if (isMainCoin) {
        const params = {
          offerType: this.offerType == "buying" ? "1" : "2",
          tokenId: this.currentToken.tokenId,
          amount: this.tokenAmount, // 合约内需要乘精度
          value: pricingTokenAmount,  // 合约内需要乘精度
          fullMatch: this.fillType == "singleFill" ? true : false,
          decimals: this.currentPricingToken.decimals  // 精度
        };
        console.log(params);
        try {
          /**
           * 1 newOfferETH,与newOffer不同的是，writeContract外层多传一个value:price参数
           * 2 获得的hash，查询结果，用结果的区块高度查log,得到offerId和offerTx
           */
          const res = await newOfferETH(params);
          console.log("res", res);
          const log = await getPrizePoolDrawEventLogs(
            res.blockNumber,
            "createOffer"
          );
          console.log("log", log);
          const offerId = log[0].args[0];
          const offerTx = log[0].transactionHash;
          this.updateOffer(offerId, offerTx, id);
        } catch (error) {
          console.log(error);
          api.error({
            message: `Error`,
            description: errorParse(error).toString(),
            placement: "top",
          });
          this.offerError(id);
        }
      } else {
        const params = {
          offerType: this.offerType == "buying" ? "1" : "2",
          tokenId: this.currentToken.tokenId,
          amount: this.tokenAmount, // 合约内需要乘精度
          value: pricingTokenAmount, // 合约内需要乘精度
          exToken: this.currentPricingToken.tokenAddress,
          fullMatch: this.fillType == "singleFill" ? true : false,
        };
        console.log(params);
        try {
          /**
           * 1: 获取erc20批准交易
           * 2024-3-26,现在不需要批准，而是把批准作为第一步流程，与newOffer流程隔离开，先检查批准额度是否已经达标，如果达标就不需要再请求，没达标就先批准，然后再点击按钮
           */
          // const result = await erc20Approve(params.exToken, params.value);
          // console.log(result);
          if (true) {
            /**
             * 2: 获得批准以后，newOffer
             */
            const res = await newOffer(params);
            console.log("res", res);
            const log = await getPrizePoolDrawEventLogs(
              res.blockNumber,
              "createOffer"
            );
            console.log("log", log);
            /**
             * 3: 创建成功以后，获得hash，通过getLog获得交易详情，主要是offerId，根据abi文档可以得出是args[0], log是个list
             */
            const offerId = log[0].args[0];
            const offerTx = log[0].transactionHash;
            this.updateOffer(offerId, offerTx, id);
          } else {
            api.error({
              message: `Error`,
              description: errorParse(error).toString(),
              placement: "top",
            });
            return;
          }
        } catch (error) {
          this.offerError(id);
          console.log(error);
          api.error({
            message: `Error`,
            description: errorParse(error).toString(),
            placement: "top",
          });
        }
      }
      this.openMask = false;
    },
    // 创建offer，在调用起小狐狸前发起
    async submitCreateOffer() {
      const account = getAccount();
      const submitForm = {
        pledgeRate: Number(this.fee.pledgeRate) / 10 ** 6, // 抵押率
        userAddress: account.address,
        // offerId: Number(offerId),
        networkId: this.currentToken.networkId,
        offerType: this.offerType == "buying" ? "1" : "2", //1，买 2,卖
        tokenId: this.currentToken.id, // 注意，这里拿的是token的id，不是token的tokenId
        fullMatch: this.fillType == "singleFill" ? true : false,
        // offerTx: offerTx,
        totalCost: this.pricingTokenAmount, // 挂单exToken数量（exToken的数量）不用 * 精度
        totalAmount: this.tokenAmount, // 挂单数量(填写的token数量，整数)
        priceTokenId: this.currentPricingToken.id, // 定价币种记录ID
      };
      console.log('submitForm',submitForm);
      // const submitFormJsonString = JSON.stringify(submitForm);
      // localStorage.setItem("createOffer_form", submitFormJsonString);
      const res = await createOffer(submitForm);
      return res.data;
    },
    // 更新offer，在调用完小狐狸后发起
    updateOffer(offerId, offerTx, id) {
      const submitForm = {
        offerId: Number(offerId),
        offerTx: offerTx,
        id: id, // 创建订单后返回的主键
      };
      updateTxResult(submitForm).then((res) => {
        console.log("updateRes", res);
        if (res.code == 200) {
          localStorage.removeItem("createOffer_form");
        }
        api.success({
          message: `Success`,
          description: "Create offer success",
          placement: "top",
        });
        this.handleSuccess();
      });
    },
    offerError(id) {
      offerCatchError(id).then(res => {
        
      })
    }
  },
};
</script>

<style lang='scss' scoped>
@import "@/styles/base.scss";
.createOffer-modal-content {
  .modal-title {
    font-size: 0.23rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
  .network-name {
    height: 0.46rem;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.09rem;
    margin-bottom: 0.46rem;
    font-weight: 500;
    font-size: 0.18rem;
    color: #333333;
    margin: 0 0.4rem;
  }
  .select-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.16rem 0.4rem;
  }
  .input-number-box {
    background: linear-gradient(149deg, #237cff 0%, #0156fe 100%);
    border-radius: $border-radius;
    padding: 0.14rem 0.11rem;
    margin: 0.15rem 0.4rem;
    .token-wrap,
    .extoken-wrap {
      .title {
        font-size: 0.16rem;
        color: #ffffff;
        display: flex;
        align-items: center;
      }
    }
    .extoken-wrap {
      .token-usd-value {
        flex-grow: 1;
        text-align: right;
      }
    }
  }
  .fill-type-wrap {
    margin: 0.15rem 0.4rem;
    .fill-title {
      font-weight: 500;
      font-size: -0.21rem;
      color: #333333;
      margin-bottom: 0.23rem;
    }
    .group-check-wrap {
      .group-item {
        display: flex;
        cursor: pointer;
        align-items: baseline;
        .icon {
          width: 0.23rem;
          height: 0.23rem;
          background-size: cover;
          background-image: url("@/assets/images/wxz_icon.png");
          margin-right: 0.11rem;
        }
        .active {
          background-image: url("@/assets/images/xz_icon.png");
        }
        .text {
          color: #333333;
          margin-bottom: 0.23rem;
          .title {
            font-weight: 600;
            font-size: 0.23rem;
            margin-bottom: 0.06rem;
          }
        }
      }
    }
  }
  .action-button-wrap,
  .modal-footer {
    display: flex;
    justify-content: space-between;
    margin: 0.15rem 0.4rem;
    .action-button {
      width: 2.3rem;
      height: 0.46rem;
      border-radius: $border-radius;
      line-height: 0.46rem;
      text-align: center;
      color: #fff;
      font-size: 0.18rem;
      font-weight: 500;
      cursor: pointer;
      background: linear-gradient(169deg, #028fff 0%, #0156fe 100%);
      box-shadow: 0px 8 30px 0px rgba(1, 86, 254, 0.2);
      &:hover {
        opacity: 1;
      }
      &.disabled {
        color: #fff;
        background: #cccccc;
        box-shadow: 0px 10 38px 0px rgba(204, 204, 204, 0.2);
        cursor: not-allowed;
      }
    }
  }
  &.step-2 {
    padding: 0.15rem 0.4rem;
    .modal-header {
      display: flex;
      align-items: center;
      margin-bottom: 0.23rem;
      .token-image {
        width: 0.55rem;
        height: 0.55rem;
        background-size: cover;
        margin-right: 0.11rem;
      }
      .text {
        .token-name {
          font-weight: 500;
          font-size: 0.23rem;
          color: #333333;
        }
        .tips {
          font-size: 0.18rem;
          color: #333333;
        }
      }
    }
    .modal-body {
      background: #e6edf4;
      border-radius: $border-radius;
      border: 1px solid #cccccc;
      padding: 0 0.11rem;
      .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.14rem 0;
        border-bottom: 1px solid #eeeeee;
        &:last-child {
          border-bottom: 0;
        }
        .label {
          color: #666666;
          display: flex;
          align-items: center;
          .icon {
            width: 0.15rem;
            height: 0.15rem;
            margin-left: 0.11rem;
            background-size: cover;
            background-image: url("@/assets/images/tishi_icon.png");
          }
        }
        .value {
          color: #333333;
          display: flex;
          align-items: center;
          &.bold {
            font-weight: 500;
          }
          .icon {
            width: 0.18rem;
            height: 0.18rem;
            margin-left: 0.11rem;
            background-size: cover;
          }
        }
        .tag {
          padding: 0 0.11rem;
          height: 0.27rem;
          line-height: 0.27rem;
          text-align: center;
          font-size: 0.14rem;
          font-weight: bold;
          border-radius: 0.05rem;
          &.green {
            color: #1ec28c;
            background: #d3f2e8;
          }
          &.purple {
            color: #627eea;
            background: #e0e5fa;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
@import "@/styles/base.scss";
.loading-mask {
  .ant-modal-content {
    background-color: transparent !important;
    box-shadow: none;
  }
  .spin-wrap {
    display: flex;
    justify-content: center;
  }
}
.input-number-box {
  .cell {
    margin: 0.11rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .input-box {
      .ant-input-number {
        width: 114px;
        height: 0.32rem;
        background: #1c4487;
        border-radius: 8px;
        font-size: 0.3rem;
        .ant-input-number-input {
          color: #fff;
          height: 0.32rem;
        }
      }
    }
  }
  .select-box {
    .menu-button {
      border: 1px solid #fff;
      border-radius: 0.05rem;
      padding: 0 0.02rem 0 0.16rem;
      display: flex;
      align-items: center;
      height: 0.27rem;
      cursor: pointer;
      .left-icon {
        width: 0.18rem;
        height: 0.18rem;
        background-size: cover;
      }
      .current-menu-name {
        font-size: 0.16rem;
        color: #fff;
        margin: 0 0.2rem 0 0.06rem;
      }
      .right-icon {
        width: 0.18rem;
        height: 0.18rem;
        background-size: cover;
        background-image: url("@/assets/images/down_icon_white.png");
      }
    }
  }
  .drive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line-1 {
      width: 47%;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.22) 0%,
        #ffffff 100%
      );
    }
    .icon {
      width: 0.27rem;
      height: 0.27rem;
      background-size: cover;
      background-image: url("@/assets/images/arrowdown.png");
      margin: 0 0.11rem;
    }
    .line-2 {
      width: 47%;
      height: 1px;
      background: linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0.22) 0%,
        #ffffff 100%
      );
    }
  }
}
.per-input-box {
  margin: 0.16rem 0.4rem;
}
</style>